<template>

    <canvas ref="ropeCanvas"></canvas>

</template>

<script setup>
import { ref, onMounted } from "vue"
const ropeCanvas = ref(null)
const drawRope = () => {
    const canvas = ropeCanvas.value;
    const ctx = canvas.getContext('2d');

    const segments = 20; // 分段数
    const segmentLength = canvas.height / segments; // 每段的长度
    const segmentWidth = canvas.width / 4; // 每段的宽度

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < segments; i++) {
        const y = i * segmentLength + segmentLength / 2;
        const x1 = Math.random() * segmentWidth * 2 + segmentWidth;
        const x2 = Math.random() * segmentWidth * 2 + segmentWidth * 2;
        const x3 = Math.random() * segmentWidth * 2 + segmentWidth * 3;
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.quadraticCurveTo(x2, y - segmentLength / 4, x3, y);
        ctx.lineWidth = Math.random() * 5 + 2;
        ctx.strokeStyle = 'brown';
        ctx.stroke();
    }
}

onMounted(() => {
    drawRope();
})
</script>

<style lang="scss" scoped></style>